<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>选项卡</title>
		<script>
			window.onload = function(){
			      new obj("box")
			}
			function obj(box){
			      	 var _this = this;
			      	 var oBox = document.getElementById(box);
			      	 this.aBtn = oBox.getElementsByTagName("input");
			      	 this.aDiv = oBox.getElementsByTagName("div");
			      	 for(var i = 0;i<this.aBtn.length;i++){
			      	 	this.aBtn[i].index = i;
			      	 	this.aBtn[i].onclick = function(){
			      	 		_this.click(this)
			      	 	}
			      	 }
			      }
			      obj.prototype.click = function(oBtn){
			      	  for(var j = 0;j<this.aBtn.length;j++){
			      	  	this.aBtn[j].className = "";
			      	  	this.aDiv[j].className = "";
			      	  }
			      	  this.aBtn[oBtn.index].className="active";
			      	  this.aDiv[oBtn.index].className = "show";
			      }
		</script>
		<style>
			*{
				margin: 0;
				padding: 0;
				font-family: "微软雅黑";
			}
			#box input{
				width: 80px;
				height: 30px;
				font-size: 18px;
				margin: 20px;
			}
			#box input.active{
				background: pink;
			}
			#box div{
				width: 400px;
				height: 300px;
				border: 1px solid yellow;
				text-align: center;
				line-height: 300px;
				font-size: 30px;
				color: white;
				display: none;
			}
			#box .show{
				display: block;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<input type="button" value="按钮1" class="active"/>
			<input type="button" value="按钮2"/>
			<input type="button" value="按钮3"/>
			<div style="background: pink;" class="show">第一个div</div>
			<div style="background: palegreen;">第二个div</div>
			<div style="background: paleturquoise;">第三个div</div>
		</div>
	</body>
</html>
